<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="initial-scale=1.0" />
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <title>手势密码</title>
  <link rel="stylesheet" href="../../css/reset.css" />
  <style>
    body {
      width: 100%;
      background-color: #fff;
      font-size: 0.25rem;
      height: auto;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      font-family: Helvetica;
      color: rgba(24, 24, 24, 0.65);
    }

    .testFix {
      width: 100%;
      /*height: 1.32rem;*/
      position: fixed;
      top: 0;
      left: 0;
    }

    .head {
      width: 100%;
      height: 44px;
      background-color: #ffffff;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      align-items: center;
      -webkit-align-items: center;
      box-sizing: border-box;
      border-bottom: 1px solid #e2e2e2;
      padding: 0 0.26rem;
    }

    .head img {
      width: 0.21rem;
      height: 0.36rem;
    }

    .head_title {
      font-size: 0.35rem;
      color: #333333;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .nowNumber {
      padding: 0 0 0 0.24rem;
      box-sizing: border-box;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      border-top: 0.2rem solid #f7f7f7;
      margin-top: 44px;
    }

    .showli {
      width: 100%;
      height: 0.8rem;
      padding-right: 0.24rem;
      box-sizing: border-box;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      align-items: center;
      -webkit-align-items: center;
      border-bottom: 1px solid #e5e4e5;
    }

    .showliblance {
      width: 100%;
      height: 0.8rem;
      padding-right: 0.24rem;
      box-sizing: border-box;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      align-items: center;
      -webkit-align-items: center;
    }

    #keepBiance {
      display: inline-block;
      width: 100%;
      font-size: 0.26rem;
      padding-left: 0.1rem;
      outline: none;
      border: none;
      height: 0.64rem;
    }

    .tips {
      background-color: #f7f7f7;
      padding: 0 0.24rem;
      height: 0.8rem;
      color: #828282;
      box-sizing: border-box;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      justify-content: center;
    }

    .aui-switch {
      width: 1rem;
      height: 0.54rem;
      position: relative;
      vertical-align: top;
      border: 1px solid #dddddd;
      background-color: #dddddd;
      border-radius: 0.54rem;
      background-clip: content-box;
      display: inline-block;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear;
    }

    .aui-switch:before {
      width: 0.53rem;
      height: 0.53rem;
      position: absolute;
      top: -0.01rem;
      left: -0.02rem;
      border-radius: 0.5rem;
      background-color: #fff;
      content: "";
      -webkit-transition: left 0.2s;
      transition: left 0.2s;
    }

    .aui-switch:checked {
      border-color: #ffd203;
      background-color: #ffd203;
    }

    .aui-switch:checked:before {
      left: 0.42rem;
    }

    .checkname {
      padding: 0 0 0 0.24rem;
      box-sizing: border-box;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      border-top: 0.2rem solid #f7f7f7;
    }

    .showname {
      width: 100%;
      height: 0.94rem;
      padding-right: 0.24rem;
      box-sizing: border-box;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      align-items: center;
      -webkit-align-items: center;
    }

    .showreg {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      -webkit-align-items: center;
    }

    .checkpassword {
      padding: 0 0 0 0.24rem;
      box-sizing: border-box;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      border-top: 0.2rem solid #f7f7f7;
    }

    .showpassword {
      width: 100%;
      height: 0.8rem;
      padding-right: 0.24rem;
      box-sizing: border-box;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      align-items: center;
      -webkit-align-items: center;
      border-bottom: 1px solid #e5e4e5;
    }

    .showpass {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      -webkit-align-items: center;
    }
  </style>
</head>

<body>
  <div class="testFix">
    <div class="head" style="position: relative">
      <span id="goback"
        style="position: absolute;z-index: 1;left: 0;padding: 0 0.3rem; padding-right: 0.5rem;top: 0;height: 100%; box-sizing: border-box;line-height: 47px;">
        <img src="../../image/left_jiantouax.png" style="width: 10px;height: auto" />
      </span>
      <span class="head_title" style="display: block;width: 100%;text-align: center">
        安全设置
      </span>
      <span style="display: inline-block;width: 0.21rem;height: 0.36rem;">
      </span>
    </div>
  </div>
  <div class="nowNumber">
    <p class="showli">
      <span style="font-size: 0.26rem"> 解锁设置 </span>
      <span>
        <input type="checkbox" class="aui-switch" id="chooseNewRuler" data-flag="false" />
      </span>
    </p>
    <p class="showliblance" style="display:none;">
      <span style="font-size: 0.26rem"> 手势设置 </span>
      <span>
        <img src="../../image/right_jintouax.png" alt="" style=" width: 0.12rem;height: 0.22rem;" />
      </span>
    </p>
  </div>
  <div class="tips">
    <p>设置手势解锁来保护隐私信息</p>
  </div>
  <div class="checkname">
    <p class="showname">
      <span style="font-size: 0.26rem"> 实名认证 </span>
      <span class="showreg" style="display: block;display: flex; flex: 1;justify-content: flex-end;overflow: hidden;">
        <span class="statusText"
          style="display:block;height: 0.3rem;width: 5rem;text-align: right; padding-left: 0.3rem;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;">
          未认证
        </span>
        <img src="../../image/right_jintouax.png" style="width: 0.18rem;height: 0.33rem;margin-left: 0.15rem;" />
      </span>
    </p>
  </div>
  <div class="checkpassword">
    <p class="showpassword">
      <span style="font-size: 0.26rem"> 交易密码 </span>
      <span class="showpass">
        <span class="statuspassText"> 未设置 </span>
        <img src="../../image/right_jintouax.png" style="width: 0.18rem;height: 0.33rem;margin-left: 0.15rem;" />
      </span>
    </p>
  </div>
  <p class="tipsRepass" style="height: 0.8rem;line-height: 0.8rem;background-color: #f7f7f7;padding-left: 0.24rem;">
    保护账户安全，余额提现需设置交易密码
  </p>
  <script src="../../script/autosize.js"></script>
  <script src="../../script/fastclick.js"></script>
  <script src="../../script/jquery_three_two_one.js"></script>
  <script src="../../script/app.js"></script>
  <script>
    apiready = function () {
      var app = new APP();
      app.handlePage();
      app.headerMap();
      var account = app.getAccount();
      // 获取用户设置
      var accountSet = app.getAccountSet();
      var cointypecontract = {};
      var goMyPage = api.pageParam.goMyPage;
      var getUserStatus = -2; //用户实名状态;
      var getUserPassStus = 100; //用户交易密码状态; 200 已设置；
      //判断是否设置交易密码
      app.isPwd(function (ret) {
        if (ret) {
          getUserPassStus = ret.code;
          if (getUserPassStus == 200) {
            $(".statuspassText").text("已设置交易密码");
          }
        }
      })
      app.checkStausOther(function (ret) {
        var code = ret.code;
        if (code == 200 && ret.data.status != 2) {  //已实名
          getUserStatus = 1;
          cointypecontract = {
            name: "checkpass",
            subpage: "my/checkpass",
            title: "实名认证",
            param: {
              pageName: "checkpass",
              codeNum: 200
            }
          }
          $(".statusText").text("已通过");
          return
        }
        if (code == 200 && ret.data.status == 2) {  //已实名
          getUserStatus = -2;
          $(".statusText").text("未认证");
          cointypecontract = {
            name: "certification",
            subpage: "my/certification",
            title: "实名认证",
            param: {
              pageName: "certification",
              userName: ret.data.name,
              userIdNumber: ret.data.id_num,
              goMyPage: goMyPage
            }
          }
          return
        }
        if (code == 602) {
          getUserStatus = 0;
          $(".statusText").text("审核中");
          cointypecontract = {
            name: "checkpass",
            subpage: "my/checkpass",
            title: "实名认证",
            param: {
              pageName: "checkpass",
              codeNum: 602
            }
          }
          return
        }
        if (code == 614) {
          getUserStatus = -1
          $(".statusText").text(ret.message);
          cointypecontract = {
            name: "checkpass",
            subpage: "my/checkpass",
            title: "实名认证",
            param: {
              pageName: "checkpass",
              codeNum: 614,
              failText: ret.message
            }
          }
          return
        }
        if (code == 609) {
          getUserStatus = -2;
          $(".statusText").text("未认证");
          cointypecontract = {
            name: "choosecerfertion",
            subpage: "my/choosecerfertion",
            title: "实名认证",
            param: {
              pageName: "choosecerfertion"
            }
          }
        }
      });
      var lineColor = "#ffcf07";
      var errLineColor = "#ff3c07";
      if (accountSet.openHandPassLine == true) {
        lineColor = "#ffcf07";
        errLineColor = "#ff3c07";
      } else {
        lineColor = "rgba(255,255,255,0)";
        errLineColor = "rgba(255,255,255,0)";
      }
      if (app.ST == "ios") {
        $("input").click(function () {
          $(this).focus().select(); //保险起见，还是加上这句。
        });
      }
      if (accountSet.openHandPassword == true) {
        $("input[type='checkbox']").attr("checked", "checked");
        $(".showliblance").show();
      } else {
        $("input[type='checkbox']").removeAttr("checked");
        $(".showliblance").hide();
      }
      $("#chooseNewRuler").unbind("click").click(function (e) {
        var accountSetNew = app.getAccountSet();
        var isChecked = $(this).is(":checked");
        if (isChecked) {
          app.trigger("showBackButton");
          accountSetNew.openHandPassword = true;
          app.setAccount(accountSetNew);
          $(".showliblance").show();
          var accountSetNew = app.getAccountSet();
          if (accountSet.openHandPassLine == true) {
            lineColor = "#ffcf07";
            errLineColor = "#ff3c07";
          } else {
            lineColor = "rgba(255,255,255,0)";
            errLineColor = "rgba(255,255,255,0)";
          }
          api.openWin({
            name: "checkhand",
            url: app.hd + "extrapage/checkhand.html",
            slidBackEnabled: false,
            animation: {
              type: "none"
            },
            pageParam: {
              lineColor: lineColor,
              errLineColor: errLineColor,
              showBack: true
            }
          });
        } else {
          $(".showliblance").hide();
          accountSetNew.openHandPassword = false;
          app.setAccount(accountSetNew);
          api.openWin({
            name: "checkhand",
            url: app.hd + "extrapage/checkhand.html",
            slidBackEnabled: false,
            animation: {
              type: "none"
            },
            pageParam: {
              closeHandLine: "true",
              lineColor: lineColor,
              errLineColor: errLineColor
            }
          });
        }
      });
      $(".showliblance").click(function () {
        var pageValue = {
          name: "handset",
          subpage: "my/handset",
          title: "手势设置",
          param: {
            pageName: "handset"
          }
        }
        app.setNavBarAttr(pageValue);
      })
      $(".checkname").click(function () {
        app.setNavBarAttr(cointypecontract);
      });
      $(".checkpassword").on("click", function () {
        if (getUserStatus == -2) {
          app.toast("请先实名认证");
          return
        }
        if (getUserStatus == -1) {
          app.toast("实名未通过审核");
          return
        }
        if (getUserStatus == 0) {
          app.toast("实名审核中");
          return
        }
        if (getUserPassStus == 200) {
          var pageValue = {
            name: "business_set",
            subpage: "mine/business_set",
            title: "设置交易密码",
            param: {
              pageName: "business_set",
              allowEdit: true
            }
          }
          app.setNavBarAttr(pageValue);
        } else {
          var pageValue = {
            name: "deal_password",
            subpage: "mine/deal_password",
            title: "设置交易密码",
            param: {
              pageName: "deal_password",
              allowEdit: true
            }
          }
          app.setNavBarAttr(pageValue);
        }
      })
      $("#goback").click(function () {
        if (goMyPage != undefined && goMyPage == true) {
          app.trigger("goMain");
          setTimeout(function (params) {
            app.closeW();
          }, 1000)
        } else {
          app.closeW();
        }
      });
      app.back(function () {
        if (goMyPage != undefined && goMyPage == true) {
          app.trigger("goMain");
          app.closeW();
        } else {
          app.closeW();
        }
      });
      var events = ["openHandSet", "backF", "auth_commit_success", "setdealPassOk", "forgetPass"];
      app.listen(events, function () {
        app.reload();
      });
      app.listen("closeWinDow", function () {
        setTimeout(function (params) {
          app.closeW();
        }, 1000);
      });
    };
  </script>
</body>

</html>